<template>

  <div class="login-container">
    <!-- logo区域 -->
    <div class="logo">
      <img alt="" src="../../assets/logo.png">
    </div>

    <!-- 登录表单区域 -->
    <el-form :model="Loginuser" :rules="userRules" class="loginform_style" label-width="0px" ref="userForm">
      <el-form-item prop="tel">
        <el-input placeholder="输入您的手机号" prefix-icon="el-icon-mobile" v-model="Loginuser.tel"></el-input>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="14"><div class="grid-content bg-purple">
          <el-form-item prop="code">
            <el-input placeholder="输入您的验证码" prefix-icon="el-icon-lock" type="password" v-model="Loginuser.code"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="10"><div class="grid-content bg-purple">
          <el-button type="primary" :disabled="isDis" @click="sendCode">
            {{btnmsg}}
          </el-button>
        </div></el-col>
      </el-row>
      <el-button type="text" size="mini" @click="toLogin">用户登录>></el-button>
      <el-form-item class="btns">
        <el-button @click="login" type="primary">登录</el-button>
        <el-button @click="resetForm" type="info">重置</el-button>
      </el-form-item>
    </el-form>


  </div>

</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        Loginuser: {
          tel: '',
          code: '',
        },
        isDis:false,
        btnmsg:"发送验证码",
        totalTime:60,
        userRules: {
          tel: [
            {required: true, message: '请输入电话号码', trigger: 'blur'},
            {pattern:/^1[3456789]\d{9}$/,message: "手机号格式有误",trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {min:6,max:6,message: "请输入六位验证码", trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      login:function(){
        this.$http.post("/customerLogin/login",this.Loginuser).then((res)=>{
          if (res.data.success){
            debugger;
            sessionStorage.setItem("user",JSON.stringify(res.data.result.user));
            sessionStorage.setItem("token",res.data.result.token);
            sessionStorage.setItem("linkman",JSON.stringify(res.data.result.linkman));
            this.$router.push('/customerHome');
            alert("成功!");
            this.$message.success(res.data.message);
          }else{
            this.$message.error(res.data.message);
          }
          }
        )
      },
      sendCode:function(){
        //判断手机号是否符合规定
        if (!(/^1[3456789]\d{9}$/).test(this.Loginuser.tel)){
          this.$message.error("输入的手机号有误!");
          return;
        }
        this.$http.get("/customerLogin/sendCode/"+this.Loginuser.tel).then((res)=>{
          if(res.data.success){
            this.$message({
              message:res.data.message,
              type:"success"
            })
          }else{
            this.$message.error(res.data.message);
          }
          }
        )
        //前端定时器
        var setiv = window.setInterval(()=>{
          var time = this.totalTime--;
          this.btnmsg = time+"秒后重新发送"
          this.isDis = true
          if (time<=0){
            window.clearInterval(setiv);
            this.totalTime=60
            this.btnmsg="发送验证码"
            this.isDis=false
          }
          }
        ,1000);
      },
      toLogin:function(){
        this.$router.push('/login');
      },
      resetForm: function () {
        this.$refs['userForm'].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }

</style>
